<template>
  <el-dialog title="分配权限" :visible="showDialog">
    <!--
      show-checkbox: 树形控件中显示复选框
      check-strictly: 取消父子关联的功能
      node-key: 值为节点数据中的一个字段名，该字段在整颗树中是唯一的
     -->
    <el-tree
      ref="tree"
      check-strictly
      show-checkbox
      :data="permList"
      :props="{label: 'name'}"
      node-key="id"
    />
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-button
          type="primary"
          size="small"
          @click="submit"
        >确定</el-button>
        <el-button size="small">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { allPermission } from '@/api/permission'
import { listToTree } from '@/utils/index'
import { getRoleDetail, assignPerm } from '@/api/setting'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      permList: [], // 权限列表
      checkedList: [], // 选中的权限列表
      roleId: '' // 角色id
    }
  },
  async created() {
    // 获取并保存转换权限列表
    const res = await allPermission()
    // res.data.data 需要转换的数据，'0'是一级权限的pid的值
    this.permList = listToTree(res.data.data, '0')
  },
  methods: {
    async getRoleDetail(id) {
      this.roleId = id // 保存角色id
      // 获取默认的角色对应的权限信息
      const result = await getRoleDetail(id)
      // 保存默认的权限信息
      this.checkedList = result.data.data.permIds
      // 实现数据回显，setCheckedKeys是tree组件提供的方法，
      // 必须结合node-key一起使用才能实现数据回显
      this.$refs.tree.setCheckedKeys(this.checkedList)
    },

    // 确定 分配权限
    async submit() {
      // getCheckedKeys: 这个是tree组件的方法，用于获取选中选项数据的方法
      this.checkedList = this.$refs.tree.getCheckedKeys()
      // console.log(61, '选中的选项', this.checkedList)
      // 调用接口分配权限
      await assignPerm({
        id: this.roleId,
        permIds: this.checkedList
      })
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style scoped>
</style>
